<!--大气监测-->
<template>
    <div class="rightView">
        <div class="right_box">
            <transition name="animationRL">
                <div v-show="shows">
                    <div class="container container_1 flex boxSize">
                        <div class="part_left">
                            <div class="top">
                                <div class="container_title">
                                    <span>预警记录</span>
                                </div>
                                <div class="chart_list flex boxSize">
                                    <div class="chart_item chart_item_1 flex">
                                        <div class="chart_value">{{ chart_1_data.total }}个</div>
                                        <div class="chart_name">每月预警总数</div>
                                    </div>
                                    <div class="chart_item chart_item_2 flex">
                                        <div class="chart_value">{{ chart_1_data.nodisposal }}个</div>
                                        <div class="chart_name">未处理预警数</div>
                                    </div>
                                    <div class="chart_item chart_item_3 flex">
                                        <div class="chart_value">{{ chart_1_data.disposalPercent }}%</div>
                                        <div class="chart_name">处置率</div>
                                    </div>
                                </div>
                            </div>
                            <div class="bottom">
                                <div class="container_title">
                                    <span>预警列表</span>
                                </div>
                                <el-scrollbar class="table_box scroll-container"
                                              style="overflow-y: auto;overflow-x: hidden ">
                                    <table>
                                        <thead>
                                        <tr>
                                            <th>预警时间</th>
                                            <th>预警名称</th>
                                            <th>预警等级</th>
                                            <th>处理状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="(item, index) in tableData" :key="index"
                                            :class="index % 2 ? 'single' : ''">
                                            <td>{{ item.alarmTime }}</td>
                                            <td>{{ item.alarmName }}</td>
                                            <td>
                                                <span v-if="item.alarmLevel === '低'" style="color: #48FF1E;">低</span>
                                                <span v-if="item.alarmLevel === '中'" style="color: #FFA21E;">中</span>
                                                <span v-if="item.alarmLevel === '高'" style="color: #F86900;">高</span>
                                            </td>
                                            <td>{{ item.disposalStatus }}</td>
                                            <td>
                                                <span class="table_btn" @click="handleDetail(item)">详情</span>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </el-scrollbar>
                            </div>

                        </div>
                    </div>
                    <div class="container dayBox boxSize">
                        <div class="part_right">
                            <div class="top">
                                <div class="container_title">
                                    <span>空气质量日历</span>
                                </div>
                            </div>
                            <div class="chart_3_1 flexs">
                                <div class="chart_left">
                                    <div class="head flex">
                                        <div v-for="(item, index) in chart_3_1_head" class="head_label" :key="index">
                                            {{ item }}
                                        </div>
                                    </div>
                                    <div class="list flex">
                                        <div v-for="(item, index) in chart_3_1_list" class="list_label" :key="index">
                                            <span v-if="item" :style="{color: item.color}">{{ item.date }}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="chart_right">
                                    <div v-for="(item, index) in chart_3_1_config" class="config_list flex"
                                         :key="index">
                                        <div class="icon" :style="{backgroundColor: item.color}"></div>
                                        <div class="label">{{ item.label }}</div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="container container_2 boxSize">
                        <div class="container_title">
                            <span>24小时废气排放超标次数</span>
                        </div>
                        <div class="chart_list flex">
                            <div class="chart_item boxSize" ref="air_chart_3_2">
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            <div class="shrink" @click="shows = !shows"></div>
        </div>
        <div class="dialog_box dialog_box_1 boxSize" v-show="detailShow && shows">
            <div class="head flex">
                <div class="chart_title">
                    <div class="txt">预警详情</div>
                    <div class="line"></div>
                </div>
                <div class="chart_close" @click="detailShow = false"></div>
            </div>
            <div class="part_title">基本信息</div>
            <div class="top flex">
                <div class="top_list">
                    <div class="top_item">
                        <div class="item_name">事件名称:</div>
                        <div class="item_value">{{ eventDetail.eventName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">站点名称:</div>
                        <div class="item_value">{{ eventDetail.siteName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">事件级别:</div>
                        <div class="item_value">{{ eventDetail.eventLevelName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">环境要素:</div>
                        <div class="item_value">{{ eventDetail.eventTypeName }}</div>
                    </div>
                </div>
                <div class="top_list">
                    <div class="top_item">
                        <div class="item_name">发现时间:</div>
                        <div class="item_value">{{ eventDetail.startTimeStr }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">污染类型：</div>
                        <div class="item_value">{{ eventDetail.pollutionTypeName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">事件来源:</div>
                        <div class="item_value">{{ eventDetail.eventSourceName }}</div>
                    </div>
                    <div class="top_item">
                        <div class="item_name">事件状态:</div>
                        <div class="item_value">{{ eventDetail.eventStatusName }}</div>
                    </div>
                </div>
            </div>
            <div class="top flex">
                <div class="top_list full">
                    <div class="top_item">
                        <div class="item_name">事件描述:</div>
                        <div class="item_value">{{ eventDetail.description }}</div>
                    </div>
                </div>
            </div>

            <div class="part_title">任务描述</div>
            <div class="middle flex">{{ missionFields.description }}</div>
            <div class="part_title">处置流程</div>
            <div class="process_container">
                <div class="svg_item" v-html="processImages"></div>
            </div>
            <div class="part_title">处置节点</div>
            <div class="bottom">
                <div class="list" v-for="(item, index) in taskInfo" :key="index">
                    <div class="head flex">
                        <div class="icon">
                            <div class="dot"></div>
                        </div>
                        <div class="content flex">
                            <div class="title">数据分析</div>
                            <div class="name">{{ item.assigneeName }}</div>
                            <div class="status">{{ item.nodeStatusName }}</div>
                            <div class="time start">接收：{{ item.startTimeStr }}</div>
                            <div class="time end">处置：{{ item.endTimeStr }}</div>
                            <div class="time use">耗时：{{ item.useTime }}</div>
                        </div>

                    </div>
                    <div class="info flex">
                        <div class="icon">
                            <div class="line"></div>
                        </div>
                        <div class="content">
                            <div class="item flex">
                                <span class="title">是否有效：</span>
                                <span class="value"></span>
                            </div>
                            <div class="item flex">
                                <span class="title">详细信息：</span>
                                <span class="value">{{ taskInfo.taskName }}</span>
                            </div>
                            <div class="item flex img">
                                <span class="title">现场照片</span>
                                <span class="value"></span>
                            </div>
                            <div class="item flex">
                                <span class="title">附件信息：</span>
                                <span class="value source"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="dialog_box dialog_box_2 boxSize" v-show="solveShow && shows">
            <div class="head flex">
                <div class="chart_title">
                    <div class="txt">预警处理</div>
                    <div class="line"></div>
                </div>
                <div class="chart_close" @click="solveShow = false"></div>
            </div>
            <div class="chart_des">选择人员</div>
            <div class="middle flex">
                <div class="middle_left">
                    <div class="title">组织架构</div>
                    <div class="select_box">
                        <div class="tool_name boxSize flex" @click="selectShow = !selectShow">
                            <span>选择部门</span>
                            <span class="tool_arr"></span>
                        </div>
                        <div v-show="selectShow" class="tool_options">
                            <div v-for="(item, index) in selectOptions" :key="index" @click="selectOptionsClick(item)"
                                 :class="selectActive === item.value ? 'active title boxSize' : 'title boxSize'">
                                {{ item.label }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle_right">
                    <div class="title">人员列表</div>
                    <div class="list_box boxSize">
                        <table>
                            <thead>
                            <tr>
                                <th>
                                    <div class="checkbox">
                                        <el-checkbox></el-checkbox>
                                    </div>
                                </th>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>职务</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <th>
                                    <div class="checkbox">
                                        <el-checkbox></el-checkbox>
                                    </div>
                                </th>
                                <td>王强</td>
                                <td>29</td>
                                <td>部门主任</td>
                            </tr>
                            <tr>
                                <th>
                                    <div class="checkbox">
                                        <el-checkbox></el-checkbox>
                                    </div>
                                </th>
                                <td>王二小</td>
                                <td>33</td>
                                <td>部门主任</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getAqmsOfAlarm, getWgOverLast24Hours, getPomsOfAlarm, getReportingEventsNumber, getInspectNumber,
    getComprehensiveOfAlarm, getCourentDayAlarmSite, getDetailsOfAlarmById, get24HoursTrend, getMainPollutant,
    getSiteData, getAirEnv, getRealAqiReport, getSiteRealData, getYearAqiTrend, getAqiDailyData, getChaoBiaoCompanyNum,
    getCurrentYearCompanyData, getCompanyList, pollutionPreventionMonitoring, getKeyMonitor, keyMonitoringData
} from '@/monitorApi/axios'
import {sendToUeMsg} from '@/utils/UeMessageUtils';
import pieEcharts from "echarts";
import * as echarts from "echarts";
import vkbeautify from 'vkbeautify'


export default {
    name: "airFloatRight",
    data() {
        return {
            shows: true,
            chart_1_data: {
                disposalPercent: '',
                nodisposal: '',
                total: '',
            },
            // 预警列表数据 level 1-低，2-中，3-高  status 1-未处理， 2-处理中， 3-已处理
            tableData: [],
            //  详情弹窗
            detailShow: false,
            processImages: '',
            taskInfo: [],
            eventDetail: {},
            missionFields: {},
            // 处理弹窗
            solveShow: false,
            selectShow: true,
            selectActive: '',
            selectOptions: [
                {label: '部门1', value: 1},
                {label: '部门2', value: 2},
                {label: '部门3', value: 3},
                {label: '部门4', value: 4},
            ],
            chart_3_1_head: ['日', '一', '二', '三', '四', '五', '六'],
            chart_3_1_list: [],
            chart_3_1_config: [
                {label: '优', color: '#28CFFE'},
                {label: '良', color: '#41E28F'},
                {label: '轻度', color: '#FB923B'},
                {label: '中度', color: '#FB2459'},
                {label: '重度', color: '#6800A4'},
                {label: '严重', color: '#430303'},
            ],
        }
    },
    mounted() {
        this.initChart_1()
        this.init_air_Chart_3_1()
        this.init_air_Chart_3_2()
        // this.initChart_4()
        // this.initChart_5()
        // this.initChart_6()
    },
    beforeDestroy() {
    },
    methods: {
        // 详情按钮
        async handleDetail(obj) {

            const res = await getDetailsOfAlarmById({alarmId: obj.alarmId}).catch(err => err);
            console.log('预警详情点击', res)
            if (res.code === '200') {
                // this.processImages = res.data.processImages;
                this.taskInfo = res.data.taskInfo;
                this.detailShow = true;
                // this.missionFields = res.data.missionDetail?.missionFields || {};
                this.eventDetail = res.data.eventDetail;

                if (this.eventDetail.eventLatitude && this.eventDetail.eventLongitude) {
                    // 发送 预警详情点位信息
                    sendToUeMsg({
                        eventType: 'alarmInfo',
                        points: `${this.eventDetail.eventLatitude}:${this.eventDetail.eventLongitude}`,
                        name: '环境'
                        // name: `${this.missionFields.siteTypeName}`
                    })
                }
            }
        },
        // 处理按钮
        handleSolve(obj) {
            this.solveShow = true;
        },
        selectOptionsClick(obj) {
            this.selectActive = obj.value;
        },
        // 预警记录 预警列表
        initChart_1() {
            this.tableData = [];
            getAqmsOfAlarm().then(res => {
                if (res.code === '200' && res.data) {
                    if (res.data.record) {
                        this.chart_1_data = res.data.record;
                        let _disposalPercent = parseInt(this.chart_1_data.disposalPercent * 100) / 100;
                        this.chart_1_data.disposalPercent = _disposalPercent;
                    }
                    if (res.data.list) {
                        this.tableData = res.data.list;
                    }
                }
            })
        },
        // 告警等级
        initChart_4() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '50%'],
                        startAngle: 90,
                        endAngle: -270,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#FE8500'
                            }, {
                                offset: 1,
                                color: '#FE6400'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 6,
                            fontWeight: 'bolder',
                            formatter: '高',
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: 90
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_4).setOption(option);
        },
        // 告警阈值
        initChart_5() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '50%'],
                        startAngle: 90,
                        endAngle: -270,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#0dbcf6'
                            }, {
                                offset: 1,
                                color: '#00a0e9'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 6,
                            fontWeight: 'bolder',
                            formatter: '{value}',
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: 50
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_5).setOption(option);
        },
        // 告警数据
        initChart_6() {
            var echarts = require('echarts');
            var option = {
                series: [
                    {
                        type: 'gauge',
                        radius: '100%',
                        center: ['50%', '50%'],
                        startAngle: 90,
                        endAngle: -270,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#e4007e'
                            }, {
                                offset: 1,
                                color: '#e4007e'
                            }])
                        },
                        progress: {
                            show: true,
                            roundCap: true,
                            width: 6
                        },
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            roundCap: true,
                            lineStyle: {
                                width: 6,
                                opacity: 0.3
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        anchor: {
                            show: false
                        },
                        title: {
                            show: false
                        },
                        detail: {
                            valueAnimation: true,
                            width: '60%',
                            lineHeight: 10,
                            borderRadius: 8,
                            offsetCenter: [0, 0],
                            fontSize: 6,
                            fontWeight: 'bolder',
                            formatter: '{value}',
                            color: '#FFFFFF'
                        },
                        data: [
                            {
                                value: 80
                            }
                        ]
                    },

                ]
            };
            echarts.init(this.$refs.chart_6).setOption(option);
        },
        // 大气监测 空气质量日历
        init_air_Chart_3_1() {
            getAqiDailyData().then(res => {
                this.chart_3_1_list = []
                if (res.code === '200' && res.data.monthData) {
                    let _data = res.data.monthData.reverse();
                    let firstDate = (new Date(_data[0].dateTime)).getDay();
                    let beforeLen = firstDate === 0 ? 0 : firstDate;
                    this.chart_3_1_list.length = beforeLen;
                    _data.forEach(item => {
                        let _date = (new Date(item.dateTime)).getDate()
                        this.chart_3_1_list.push({
                            date: _date,
                            color: item.aqiColor
                        })
                    })
                }
            }).catch(() => {
            });
        },
        // 24小时废气排放超标次数
        init_air_Chart_3_2() {
            getWgOverLast24Hours().then(res => {
                let _xAxis = [];
                let _data = [];
                if (res.code === '200' && res.data) {
                    Object.keys(res.data).forEach((item, index) => {
                        _xAxis.push(item);
                        _data.push(res.data[item]);
                    })
                    console.log(_xAxis, '24小时废气排放超标次数')
                    console.log(_data, '24小时废气排放超标次数2')

                    var echarts = require('echarts');
                    let option = {
                        grid: {
                            left: "3%",
                            right: "0",
                            bottom: "2%",
                            top: "15%",
                            containLabel: true,
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: 'rgba(34, 40, 46, 0.5)',
                            borderWidth: "0", //边框宽度设置1
                            borderColor: "", //设置边框颜色
                            axisPointer: {
                                type: "none",
                            },
                            textStyle: {
                                color: "#ffffff" //设置文字颜色
                            },
                        },
                        backgroundColor: "",
                        yAxis: {
                            name: '单位/次',
                            nameLocation: 'end',
                            nameTextStyle: {
                                color: "#CCCCCC",
                                fontSize: 10
                            },
                            nameGap: 5,
                            type: "value",
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: "#CCCCCC",
                                    fontSize: 10
                                },
                            },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    type: 'line',
                                    color: 'rgba(92,155,181)',
                                    width: 0.1,
                                },
                            },
                            axisTick: {
                                show: false,
                            },
                            axisLine: {
                                lineStyle: {
                                    type: 'line',
                                    color: '#2A6FDA',
                                    width: 1,
                                },
                            },
                        },
                        xAxis: [
                            {
                                type: "category",
                                axisTick: {
                                    show: false,
                                },
                                axisLabel: {
                                    show: true,
                                    textStyle: {
                                        color: "#CCCCCC",
                                        fontSize: 10
                                    },
                                },
                                data: _xAxis
                                // data: [
                                //     '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
                                //     '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
                                //     '21:00', '22:00', '23:00', '24:00'
                                // ],
                            },
                        ],
                        series: [
                            {
                                type: 'bar',
                                showBackground: false,
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {offset: 0, color: '#F28E26'},
                                        {offset: 0.5, color: 'rgba(242, 142, 38, 0.6)'},
                                        {offset: 1, color: 'rgba(242, 142, 38, 0.1)'}
                                    ])
                                },
                                emphasis: {
                                    itemStyle: {
                                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                            {offset: 0, color: '#F28E26'},
                                            {offset: 0.7, color: 'rgba(242, 142, 38, 0.6)'},
                                            {offset: 1, color: 'rgba(242, 142, 38, 0.1)'}
                                        ])
                                    }
                                },
                                data: _data
                                // data: [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149,
                                //     210, 122, 133, 334, 198, 123, 125, 220, 198, 123, 125, 220]
                            }
                        ]
                    };
                    echarts.init(this.$refs.air_chart_3_2).setOption(option);
                    echarts.init(this.$refs.pollute_chart_3_2).setOption(option);
                }
            }).catch(() => {
            })
        },
    }
}
</script>

<style lang="scss">

.list_box {

  .checkbox {
    width: 100%;
    height: 100%;

    .el-checkbox {
      width: 100%;
      height: 100%;

      .el-checkbox__input {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .el-checkbox__inner {
          width: 4px;
          height: 4px;
          background-color: transparent;
        }
      }
    }

  }

  .el-checkbox__inner {
    width: 4px;
    height: 4px;
    background-color: transparent;
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return calc($width_2k * $pixel / $width);
  }

  @function calHeight_2k($pixel) {
    @return calc($pixel / 1.8 * 2.7);
  }

  @function calFont_2k($pixel) {
    @return calc($height_2k * $pixel / $height);
  }

  .list_box {

    .checkbox {

      .el-checkbox {

        .el-checkbox__input {

          .el-checkbox__inner {
            height: calHeight_2k(4px);
          }
        }
      }

    }

    .el-checkbox__inner {
      height: calHeight_2k(4px);
    }
  }
}
</style>
<style lang="scss" scoped>
.chart_3_2 {
  width: 440px !important;
  height: 90px !important;
}

.dayBox {
  padding: 20px 20px 0;
  justify-content: space-between;
  align-items: start;
  flex-direction: row;
  width: 243px;
  height: 160px;
  background-image: url("@/assets/monitor/air/card_bg_10.png");
}

.chart_3_1 {
    width: 85%;
    align-items: start;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    //width: 260px;
    .chart_left {
        width: 310px !important;
        height: 100px;

        .head {
            justify-content: start;

            .head_label {
                width: 44px;
                height: 10px;
                text-align: center;
                line-height: 10px;
                font-size: 5px;
                color: #00FFC1;
                margin-top: 5px;
            }
        }

        .list {
            display: flex;
            flex-wrap: wrap;
            align-items: start;
            justify-content: start;

            .list_label {
                width: 44px;
                height: 10px;
                text-align: center;
                line-height: 10px;
                font-size: 5px;
                color: #ffffff;
                margin-top: 7px;
            }
        }
    }

    .chart_right {
        margin-top: 10px;
        margin-left: 10px;

        .config_list {
            align-items: center;
            justify-content: start;
            height: 14px;
            width: 40px;

            .icon {
                width: 4px;
                height: 4px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
            }

            .label {
                margin-left: 3px;
                font-size: 5px;
                color: rgba(255, 255, 255, 0.6);
            }
        }
    }
}


.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexs {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.boxSize {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
}

.rightView {
  position: relative;
  float: right;
  margin-top: 20px;

  .right_box {
    display: flex;
    flex-direction: row;
    height: 660px;
    align-items: center;
  }

  .shrink {
    width: 23px;
    height: 321px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_shrink_r.png");
  }

  .container {
    background-size: 100% 100%;

    &_title {
      width: 215px;
      height: 16px;
      display: flex;
      flex-direction: row;
      align-items: center;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/card_title.png");

      span {
        height: 16px;
        font-size: 13px;
        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #FFFFFF;
        margin-left: 11px;
        line-height: 16px;
        background: linear-gradient(0deg, #90CCFF 0%, #FAFAFB 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }


  .container_1 {
    padding: 20px 20px 0;
    justify-content: space-between;
    align-items: start;
    flex-direction: row;
    width: 243px;
    height: 275px;
    background-image: url("@/assets/monitor/air/card_bg_10.png");

    .part_left {
      width: 216px;

      .top {
        .container_title {
        }

        .chart_list {
          //margin-top: 13px;
          padding: 5px 0;
          height: 42px;
          background-color: rgba(0, 26, 68, 0.4);

          .chart_item {
            flex: 1;
            flex-direction: column;
            text-align: center;

            .chart_value {
              font-size: 11px;
            }

            .chart_name {
              font-size: 5px;
            }
          }

          .chart_item_1 {
            color: #1EE4FF;
          }

          .chart_item_2 {
            color: #FFA21E;
            border-left: 1px solid #00E6FF;
            border-right: 1px solid #00E6FF;
          }

          .chart_item_3 {
            color: #48FF1E;
          }
        }
      }

      .bottom {
        .container_title {
          margin-top: 6px;
        }

        .table_box {
          width: 210px;
          height: 145px;
          margin-top: 5px;
          overflow: hidden;

          table {
            width: 210px;
            background: rgba(18, 47, 116, 0.5);

            tr {
              th {
                font-size: 5px;
                color: #B4D7FA;
                font-weight: 400;
                text-align: center;
              }

              td {
                font-size: 4px;
                color: #ffffff;
                text-align: center;

                .table_btn {
                  display: inline-block;
                  padding: 0 2px;
                  color: #37BAF8;
                  cursor: pointer;
                }
              }
            }

            tr.single {
              background-color: rgba(0, 26, 68, 0.4);
            }
          }
        }
      }

    }

    .part_right {
      width: 216px;

      .top {
        .chart_item {
          margin-top: 6px;
          width: 213px;
          height: 130px;
          background-size: 100% 100%;
          background-image: url("@/assets/monitor/air/air_right_chart_bg_1.png");
        }
      }

      .bottom {
        margin-top: 4px;

        .head {
          justify-content: start;

          .sign {
            display: block;
            margin-right: 4px;
            width: 2px;
            height: 8px;
            background-color: #00E6FF;
          }

          .chart_title {
            font-size: 6px;
            color: #DDF8FF;
          }
        }

        .chart_name {
          margin-top: 4px;
          font-size: 6px;
          color: #00E6FF;
          text-align: center;
        }

        .chart_item {
          margin-top: 3px;
          padding: 7px;
          width: 213px;
          height: 80px;
          font-size: 5px;
          color: #00E6FF;
          line-height: 14px;
          background-size: 100% 100%;
          background-image: url("@/assets/monitor/air/air_right_chart_bg_2.png");
        }
      }
    }

  }

  .container_2 {
    padding: 20px 20px 0;
    width: 243px;
    height: 210px;
    background-image: url("@/assets/monitor/air/card_bg_11.png");

    .container_title {
      width: 200px;
      height: 17px;
      line-height: 17px;
      background-size: 100% 100%;
      background-image: url("@/assets/monitor/air/chart_title_long.png");
    }

    .chart_list {
      flex-wrap: wrap;
      justify-content: space-between;

      .chart_item {
        margin-top: 10px;
        width: 220px;
        height: 150px;


        .chart_content {
          padding: 4px 7px;
          width: 212px;
          height: 90px;

          .time {
            font-size: 6px;
            color: #ffffff;
            line-height: 13px;
          }
        }

        .chart_cover {
          padding: 0 9px;
          width: 212px;
          height: 16px;
          font-size: 6px;
          line-height: 16px;
          background: #000000;
          opacity: 0.3;
        }
      }
    }
  }

  .dialog_box {
    position: absolute;

    .head {
      width: 100%;
      justify-content: space-between;

      .chart_title {

        .txt {
          font-size: 11px;
          color: #DBE5FA;
        }

        .line {
          margin-top: 3px;
          width: 73px;
          height: 1px;
          background: #146BFF;
          border: 0px solid;
          border-image: linear-gradient(0deg, #0DCCFF, #4760FF) 10 10;
        }
      }

      .chart_close {
        width: 11px;
        height: 11px;
        background-size: 100% 100%;
        background-image: url("@/assets/monitor/air/close_icon.png");
        cursor: pointer;
      }
    }
  }

  .dialog_box_1 {
    left: -396px;
    top: 80px;
    padding: 12px;
    width: 396px;
    height: 499px;
    background-size: 100% 100%;
    background-image: url("@/assets/monitor/air/card_bg_15.png");

    .part_title {
      margin-top: 5px;
      margin-bottom: 10px;
      height: 7px;
      font-size: 7px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #00E6FF;
    }

    .top {
      width: 100%;

      .top_list {
        width: 185px;

        .top_item {
          display: flex;
          align-items: start;
          justify-content: start;
          width: 100%;
          height: 9px;
          margin-top: 12px;

          .item_name {
            min-width: 60px;
            text-align: left;
            font-size: 7px;
            color: #A6B7BF;
          }

          .item_value {
            font-size: 10px;
            color: #BEFFD0;
          }
        }
      }

      .top_list.full {
        width: 100%;
        height: 30px;

        .top_item {
          .item_value {
            flex: 1;
            height: 30px;
            line-height: 10px;
          }
        }
      }
    }

    .middle {
      margin-top: 10px;
      height: 20px;
      font-size: 7px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #BEFFD0;
      line-height: 10px;
    }

    .process_container {
      width: 100%;
      height: 90px;

      .svg_item {
        display: block;
        max-width: 100%;
        max-height: 90px;
        zoom: 0.18;

        svg {
          width: 100% !important;
          height: 90px !important;
        }
      }
    }

    .bottom {
      .list {
        .head {
          height: 16px;
          justify-content: start;
          align-items: start;

          .icon {
            width: 14px;

            .dot {
              width: 14px;
              height: 14px;
              background-size: 100% 100%;
              background-image: url("@/assets/monitor/air/process_icon.png");
            }
          }

          .content {
            padding-left: 9px;
            justify-content: space-between;
            flex: 1;
            height: 16px;
            background: rgba(17, 20, 24, 0.47);

            .title {
              font-size: 6px;
              color: #03EFFE;
            }

            .name {
              font-size: 6px;
              color: #ffffff;
            }

            .status {
              display: inline-block;
              padding: 2px 4px;
              height: 8px;
              line-height: 8px;
              text-align: center;
              border-radius: 4px;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              -ms-border-radius: 4px;
              -o-border-radius: 4px;
              color: #00FF78;
              font-size: 5px;
            }

            .time {
              padding: 2px 0px;
              height: 8px;
              line-height: 8px;
              font-size: 5px;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #F0FCFF;
              opacity: 0.7;
            }
          }
        }

        .info {
          justify-content: start;
          align-items: start;

          .icon {
            width: 14px;

            .line {
              margin: 0 auto;
              width: 1px;
              height: 110px;
              background-color: #2E9AC1;
            }
          }

          .content {
            padding-left: 9px;
            flex: 1;

            .item {
              justify-content: start;
              align-items: start;
              margin-top: 5px;
              height: 6px;

              .title {
                width: 40px;
                height: 6px;
                font-size: 6px;
                color: #ffffff;
              }

              .value {
                flex: 1;
                height: 6px;
                font-size: 6px;
                color: #BEFFD0;
              }

              .value.source {
                color: #55DDFF;
                cursor: pointer;
              }
            }

            .item.img {
              height: 40px;

              .value {
                width: 75px;
                height: 40px;
                background: #111418;
                border: 1px solid #55DDFF;

                img {
                  display: block;
                  max-width: 100%;
                  max-height: 100%;
                }
              }
            }
          }
        }
      }
    }

  }

  .dialog_box_2 {
    left: -344px;
    top: 80px;
    padding: 12px;
    width: 344px;
    height: 277px;
    background-size: 100% 100%;
    background-image: url("@/assets/monitor/air/card_bg_8.png");

    .chart_des {
      margin-top: 5px;
      font-size: 6px;
      color: rgba(255, 255, 255, 0.7);
    }

    .middle {
      margin-top: 7px;
      width: 100%;
      align-items: start;
      justify-content: space-between;

      .middle_left {
        width: 83px;
        height: 100px;

        .title {
          text-align: center;
          font-size: 7px;
          color: #00E6FF;
        }

        .select_box {
          margin-top: 5px;
          width: 100%;
          height: 169px;
          background: rgba(19, 37, 67, 0.5);

          .tool_name {
            padding: 3px 8px 3px 0;
            justify-content: start;
            text-align: left;
            width: 100%;
            color: #D8E8EC;
            font-size: 10px;
          }

          .tool_arr {
            margin-left: 10px;
            width: 8px;
            height: 8px;
            background-size: 100% 100%;
            background-image: url("@/assets/monitor/air/arr_dropdown.png");
          }

          .tool_options {
            width: 100%;
            cursor: pointer;

            .title {
              padding: 6px 0 6px 8px;
              width: 100%;
              font-size: 6px;
              text-align: left;
              color: #ffffff;
              justify-content: start;

              .tool_icon {
                width: 10px;
                height: 10px;
                border: 1px dashed #ddd;

                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
              }

              .txt {
              }
            }

            .title.active {
              color: #00FFFF;
            }
          }
        }
      }

      .middle_right {
        .title {
          text-align: center;
          font-size: 7px;
          color: #00E6FF;
        }

        .list_box {
          margin-top: 5px;
          padding: 0 12px;
          width: 220px;
          height: 169px;
          background: rgba(19, 37, 67, 0.5);

          table {
            width: 100%;

            thead {
              tr {
                padding: 5px 0;

                th {
                  text-align: center;
                  font-size: 5px;
                  color: #B4D7FA;
                  font-weight: 400;

                }
              }
            }

            tbody {
              tr {
                padding: 5px 0;
                background-color: rgba(19, 37, 67, 0.6);;

                td {
                  text-align: center;
                  font-size: 4px;
                  color: #ffffff;
                }
              }
            }
          }
        }
      }
    }


  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return calc($width_2k * $pixel / $width);
  }

  @function calHeight_2k($pixel) {
    @return calc($pixel / 1.8 * 2.7);
  }

  @function calWidthCenter($pixel) {
    @return calc($pixel / 5 * 10);
  }

  @function calFont_2k($pixel) {
    @return calc($height_2k * $pixel / $height);
  }
  .chart_3_2 {
    height: calHeight_2k(90px) !important;
  }
  .dayBox {
    width: calWidthCenter(243px);
    height: calHeight_2k(160px);
    padding-top: calHeight_2k(20px);
  }
    .chart_3_1 {

        margin-top: calHeight_2k(10px);
        .chart_left {
            height: calHeight_2k(100px);
            width: calWidthCenter(280px);
            .head {
                .head_label {
                    height: calHeight_2k(10px);
                    line-height: calHeight_2k(10px);
                    margin-top: calHeight_2k(5px);
                }
            }

            .list {

                .list_label {
                    height: calHeight_2k(10px);
                    line-height: calHeight_2k(10px);
                    margin-top: calHeight_2k(7px);
                }
            }
        }

        .chart_right {
            margin-top: calHeight_2k(10px);

            .config_list {
                height: calHeight_2k(14px);

                .icon {
                    height: calHeight_2k(4px);
                }
            }
        }
    }
  .flex {
  }

  .boxSize {
  }

  .rightView {
    margin-top: calHeight_2k(20px);

    .right_box {
      height: calHeight_2k(670px);
    }

    .shrink {
      height: calHeight_2k(321px);
    }

    .container {

      &_title {
        width: calWidthCenter(215px);
        height: calHeight_2k(16px);

        span {
          height: calHeight_2k(16px);
          margin-left: calWidthCenter(11px);
          line-height: calHeight_2k(16px);
        }
      }
    }

    .head {
      height: calHeight_2k(5px);

      .sign {
        margin-right: calWidthCenter(4px);
        width: calWidthCenter(2px);
        height: calHeight_2k(8px);
      }

      .chart_title {
      }
    }


    .container_1 {
      width: calWidthCenter(243px);
      height: calHeight_2k(275px);
      padding-top: calHeight_2k(20px);

      .part_left {
        width: calWidthCenter(216px);

        .top {
          .container_title {
          }

          .chart_list {
            //margin-top: calHeight_2k(13px);
            padding-top: calHeight_2k(5px);
            padding-bottom: calHeight_2k(5px);
            height: calHeight_2k(42px);

            .chart_item {

              .chart_value {
              }

              .chart_name {
              }
            }

            .chart_item_1 {
            }

            .chart_item_2 {
            }

            .chart_item_3 {
            }
          }
        }

        .bottom {
          .container_title {
            margin-top: calHeight_2k(6px);
          }

          .table_box {
            width: calWidthCenter(210px);
            height: calHeight_2k(145px);
            margin-top: calHeight_2k(5px);

            table {
              width: calWidthCenter(210px);

              tr {
                th {
                }

                td {

                  .table_btn {
                  }
                }
              }

              tr.single {
              }
            }
          }
        }

      }

      .part_right {
        width: calWidthCenter(216px);

        .top {
          .chart_item {
            margin-top: calHeight_2k(6px);
            width: calWidthCenter(213px);
            height: calHeight_2k(130px);
          }
        }

        .bottom {
          margin-top: calHeight_2k(4px);

          .head {

            .sign {
              margin-right: calWidthCenter(4px);
              width: calWidthCenter(2px);
              height: calHeight_2k(8px);
            }

            .chart_title {
            }
          }

          .chart_name {
            margin-top: calHeight_2k(4px);
          }

          .chart_item {
            margin-top: 3px;
            width: calWidthCenter(213px);
            height: calHeight_2k(80px);
          }
        }
      }

    }

    .container_2 {
      width: calWidthCenter(243px);
      height: calHeight_2k(210px);

      .container_title {
        width: calWidthCenter(200px);
        height: calHeight_2k(17px);
        line-height: calHeight_2k(17px);
      }

      .chart_list {

        .chart_item {
          margin-top: calHeight_2k(10px);
          width: calWidthCenter(220px);
          height: calHeight_2k(150px);
          //line-height: calHeight_2k(110px);


          .chart_content {
            padding-top: calHeight_2k(7px);
            padding-bottom: calHeight_2k(7px);
            width: calWidthCenter(212px);
            height: calHeight_2k(90px);

            .time {
            }
          }

          .chart_cover {
            width: calWidthCenter(212px);
            height: calHeight_2k(16px);
            line-height: calHeight_2k(16px);
          }
        }
      }
    }

    .dialog_box {
      position: absolute;

      .head {
        justify-content: space-between;

        .chart_title {

          .txt {
          }

          .line {
            margin-top: calHeight_2k(3px);
            width: calWidthCenter(73px);
            height: calHeight_2k(1px);
          }
        }

        .chart_close {
          width: calWidthCenter(11px);
          height: calHeight_2k(11px);
        }
      }
    }

    .dialog_box_1 {
      left: calWidthCenter(-396px);
      top: calHeight_2k(80px);
      padding: calHeight_2k(12px);
      width: calWidthCenter(396px);
      height: calHeight_2k(499px);

      .part_title {
        margin-top: calHeight_2k(5px);
        margin-bottom: calHeight_2k(10px);
        height: calHeight_2k(7px);
      }

      .top {

        .top_list {
          width: calWidthCenter(185px);

          .top_item {
            height: calHeight_2k(9px);
            margin-top: calHeight_2k(12px);

            .item_name {
            }

            .item_value {
            }
          }
        }

        .top_list.full {
          height: calHeight_2k(30px);

          .top_item {
            .item_value {
              height: calHeight_2k(30px);
              line-height: calHeight_2k(10px);
            }
          }
        }
      }

      .middle {
        margin-top: calHeight_2k(10px);
        height: calHeight_2k(20px);
        line-height: calHeight_2k(10px);
      }

      .process_container {
        height: calHeight_2k(90px);

        .svg_item {
          max-height: calHeight_2k(90px);

          svg {
            height: calHeight_2k(90px) !important;
          }
        }
      }

      .bottom {
        .list {
          .head {
            height: calHeight_2k(16px);

            .icon {
              width: calWidthCenter(14px);

              .dot {
                width: calHeight_2k(14px);
                height: calHeight_2k(14px);
                background-size: 100% 100%;
                background-image: url("@/assets/monitor/air/process_icon.png");
              }
            }

            .content {
              padding-left: calWidthCenter(9px);
              height: calHeight_2k(16px);

              .title {
              }

              .name {
              }

              .status {
                height: calHeight_2k(8px);
                line-height: calHeight_2k(8px);
              }

              .time {

                height: calHeight_2k(8px);
                line-height: calHeight_2k(8px);
              }
            }
          }

          .info {

            .icon {
              width: calWidthCenter(14px);

              .line {
                height: calHeight_2k(110px);
              }
            }

            .content {
              padding-left: calWidthCenter(9px);

              .item {
                margin-top: calHeight_2k(5px);
                height: calHeight_2k(6px);

                .title {
                  width: calWidthCenter(40px);
                  height: calHeight_2k(6px);
                  font-size: calHeight_2k(6px);
                }

                .value {
                  height: calHeight_2k(6px);
                }

                .value.source {
                }
              }

              .item.img {
                height: calHeight_2k(40px);

                .value {
                  width: calWidthCenter(75px);
                  height: calHeight_2k(40px);

                  img {
                  }
                }
              }
            }
          }
        }
      }

    }
  }
}
@media screen and (min-width: 2000px) and (max-width: 3000px) {
    $width_2k: 1920;
    $height_2k: 1080;
    $width: 4000;
    $height: 1486;
    $unit: px;
    @function calWidth_2k($pixel) {
        @return $width_2k*$pixel/$width;
    }
    @function calHeight_2k($pixel) {
        @return $pixel/1.8*2.7;
    }
    @function calFont_2k($pixel) {
        @return $height_2k*$pixel/$height;
    }
    .chart_3_1 {
        margin-top: calHeight_2k(10px);
        .chart_left {
            height: calHeight_2k(100px);
            .head {
                .head_label {
                    height: calHeight_2k(10px);
                    line-height: calHeight_2k(10px);
                    margin-top: calHeight_2k(5px);
                }
            }

            .list {

                .list_label {
                    height: calHeight_2k(10px);
                    line-height: calHeight_2k(10px);
                    margin-top: calHeight_2k(7px);
                }
            }
        }

        .chart_right {
            margin-top: calHeight_2k(10px);

            .config_list {
                height: calHeight_2k(14px);

                .icon {
                    height: calHeight_2k(4px);
                }
            }
        }
    }
}
</style>
